<template>
  <scroll-view class="article-list" scroll-y enable-flex @scrolltolower="loadMore">
    <view class="list-item u-border-bottom" v-for="(item, index) in list" :key="item.articleId" :item="item"
      @click="onClick(item)">
      <view class="list-item-top">
        <view class="title u-line-3">
          {{item.title}}
        </view>
        <view class="cover" v-if="item.thumb">
          <image :src="item.thumb"></image>
        </view>
      </view>
      <view class="list-item-bottom">
        <view class="cnt-item" @click.stop="handlePraise(item, index)">
          <text v-if="item.isPraise == 1" class="icon icon-like-on"></text>
          <text v-else class="icon icon-like"></text>
          <text>{{item.likeCnt}}</text>
        </view>
        <view class="cnt-item">
          <text class="icon icon-comment"></text>
          <text>{{item.cCnt}}</text>
        </view>
        <view class="cnt-item">
          <text class="icon icon-eye"></text>
          <text>{{item.vCnt}}</text>
        </view>
        <view class="cnt-item">
          <text>{{item.ctime}}</text>
        </view>
      </view>
    </view>
    <u-loadmore v-if="list.length || !loaded" class="list-more" :status="moreLoading" :load-text="loadText" />
    <Empty v-if="loaded && !list.length" :baseImg="emptyImg" text="暂无相关内容" :fontWeight="400" class="empty" />
  </scroll-view>
</template>

<script>
import Empty from "@/components/Empty.vue";
import { getCareerArticleListEt, addArticlePraise } from "@/api/modules/career";

export default {
  components: {
    Empty,
  },
  props: {
    consultantId: String || Number,
    personId: String || Number,
  },
  data() {
    return {
      list: [],
      pageParams: {
        pageNo: 0,
        pageSize: 20,
      },
      moreLoading: "loadmore",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      loaded: false,
      emptyImg: this.$imgBaseSelf + "common/empty_1.png",
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    loadMore() {
      if (this.moreLoading == "loading" || this.moreLoading == "nomore") return;

      this.getData(true);
    },
    getData(isMore) {
      const params = {
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
        personId: this.personId || 0,
        articlePersonId: this.consultantId,
      };
      this.moreLoading = "loading";
      getCareerArticleListEt(params).then((res) => {
        this.loaded = true;
        this.moreLoading = "loadmore";
        if (res.code == 200) {
          if (isMore) {
            this.list.push(...res.data);
          } else {
            this.list = res.data;
          }

          if (this.pageParams.pageNo >= res.pageparam.pages) {
            this.moreLoading = "nomore";
          }
          this.pageParams.pageNo++;
        } else {
          this.moreLoading = "nomore";
          uni.showToast({
            title: res.status_desc,
            icon: "none",
          });
        }
      });
    },
    onClick(item) {
      uni.navigateTo({
        url: "/pagesSub/career/careerInfo/articleDetail?id=" + item.articleId,
      });
    },
    // 点赞
    handlePraise(item, index) {
      if (!this.personId) {
        let fullPath =
          getCurrentPages()[getCurrentPages().length - 1].$page.fullPath;
        let returnUrl = encodeURIComponent(fullPath);
        uni.showModal({
          title: "提示",
          content: "该功能需要登录",
          success: function (res) {
            if (res.confirm) {
              uni.navigateTo({
                url: "/pagesSub/public/loginMode/index?returnUrl=" + returnUrl,
              });
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
        return;
      }
      let type = item.isPraise == 1 ? "cancel" : "add";
      const params = {
        person_id: this.personId,
        article_id: item.articleId,
        type: type,
      };
      addArticlePraise(params).then((res) => {
        if (res.code == 200) {
          item.isPraise = item.isPraise == 1 ? 0 : 1;
        }
        uni.showToast({
          title: res.desc,
          icon: "none",
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.article-list {
  height: 100%;
  padding: 0 32rpx;
  background-color: $uni-bg-color;
  box-sizing: border-box;
  .list-item {
    padding: 24rpx 0 40rpx 0;
    &-top {
      display: flex;
      margin-bottom: 32rpx;
      .title {
        flex: 1;
        height: 100%;
      }
      .cover {
        margin-left: 54rpx;
        image {
          width: 182rpx;
          height: 96rpx;
          border-radius: 16rpx;
        }
      }
    }
    &-bottom {
      display: flex;
      .cnt-item {
        display: flex;
        align-items: center;
        margin-right: 40rpx;
        color: #bfbfbf;

        &:last-child {
          margin: 0;
        }
      }

      .icon {
        width: 32rpx;
        height: 32rpx;
        vertical-align: bottom;
        margin-right: 12rpx;
      }
      .icon-like {
        background-image: url($img-base + "career/thumb.png");
      }
      .icon-like-on {
        background-image: url($img-base + "career/thumb_up.png");
      }
      .icon-comment {
        background-image: url($img-base + "consultant/comment.png");
      }
      .icon-eye {
        background-image: url($img-base + "consultant/eye.png");
      }
    }
  }
}
</style>